<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原子习惯 - 习惯模板</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div class="status-bar">
      <div class="time">9:41</div>
      <div class="icons">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>
    
    <div class="nav-bar">
      <div class="title">习惯模板</div>
      <div class="action" data-nav="add-habit.html">
        <i class="fas fa-plus"></i>
      </div>
    </div>
    
    <div class="screen-container">
      <!-- Search Bar -->
      <div class="search-bar">
        <i class="fas fa-search"></i>
        <input type="text" placeholder="搜索习惯模板...">
      </div>
      
      <!-- Categories -->
      <div class="category-scroller">
        <div class="category-item active">全部</div>
        <div class="category-item">健康</div>
        <div class="category-item">健身</div>
        <div class="category-item">学习</div>
        <div class="category-item">正念</div>
        <div class="category-item">生产力</div>
        <div class="category-item">财务</div>
      </div>
      
      <!-- Popular Templates -->
      <div class="template-section">
        <h3>热门模板</h3>
        
        <div class="template-card">
          <div class="template-icon">
            <i class="fas fa-running"></i>
          </div>
          <div class="template-content">
            <div class="template-title">每日运动</div>
            <div class="template-description">每天进行30分钟中等强度的运动</div>
            <div class="template-meta">
              <span class="template-users"><i class="fas fa-user"></i> 45,621人在用</span>
              <span class="template-rating"><i class="fas fa-star"></i> 4.8</span>
            </div>
          </div>
          <div class="template-action">
            <button class="btn btn-primary btn-sm">添加</button>
          </div>
        </div>
        
        <div class="template-card">
          <div class="template-icon">
            <i class="fas fa-book"></i>
          </div>
          <div class="template-content">
            <div class="template-title">每日阅读</div>
            <div class="template-description">每天阅读20页书或30分钟</div>
            <div class="template-meta">
              <span class="template-users"><i class="fas fa-user"></i> 38,452人在用</span>
              <span class="template-rating"><i class="fas fa-star"></i> 4.9</span>
            </div>
          </div>
          <div class="template-action">
            <button class="btn btn-primary btn-sm">添加</button>
          </div>
        </div>
        
        <div class="template-card">
          <div class="template-icon">
            <i class="fas fa-tint"></i>
          </div>
          <div class="template-content">
            <div class="template-title">喝水提醒</div>
            <div class="template-description">每天喝够8杯水（约2升）</div>
            <div class="template-meta">
              <span class="template-users"><i class="fas fa-user"></i> 32,187人在用</span>
              <span class="template-rating"><i class="fas fa-star"></i> 4.7</span>
            </div>
          </div>
          <div class="template-action">
            <button class="btn btn-primary btn-sm">添加</button>
          </div>
        </div>
      </div>
      
      <!-- Atomic Habits Special -->
      <div class="template-section">
        <h3>《原子习惯》特别推荐</h3>
        
        <div class="atomic-habits-showcase">
          <div class="atomic-habits-logo">
            <img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80" alt="Atomic Habits">
          </div>
          <div class="atomic-habits-intro">
            <p>根据詹姆斯·克利尔《原子习惯》四法则设计的习惯模板</p>
          </div>
        </div>
        
        <div class="template-card special">
          <div class="template-icon special">
            <i class="fas fa-spa"></i>
          </div>
          <div class="template-content">
            <div class="template-title">晨间冥想</div>
            <div class="template-description">每天早上进行10分钟的正念冥想</div>
            <div class="four-laws">
              <div class="law-item">
                <i class="fas fa-eye"></i> 放置冥想垫在床边
              </div>
              <div class="law-item">
                <i class="fas fa-heart"></i> 想象冥想后的平静心态
              </div>
              <div class="law-item">
                <i class="fas fa-check"></i> 从简单的3分钟开始
              </div>
              <div class="law-item">
                <i class="fas fa-gift"></i> 完成后给自己一杯好茶
              </div>
            </div>
          </div>
          <div class="template-action">
            <button class="btn btn-primary btn-sm">添加</button>
          </div>
        </div>
        
        <div class="template-card special">
          <div class="template-icon special">
            <i class="fas fa-pen"></i>
          </div>
          <div class="template-content">
            <div class="template-title">感恩日记</div>
            <div class="template-description">每晚记录3件感恩的事情，培养积极心态</div>
            <div class="four-laws">
              <div class="law-item">
                <i class="fas fa-eye"></i> 将日记本放在床头
              </div>
              <div class="law-item">
                <i class="fas fa-heart"></i> 与朋友分享感恩的事
              </div>
              <div class="law-item">
                <i class="fas fa-check"></i> 只需写3句话即可
              </div>
              <div class="law-item">
                <i class="fas fa-gift"></i> 写完后给自己一块小点心
              </div>
            </div>
          </div>
          <div class="template-action">
            <button class="btn btn-primary btn-sm">添加</button>
          </div>
        </div>
      </div>
      
      <!-- All Templates -->
      <div class="template-section">
        <h3>全部模板</h3>
        
        <div class="template-card">
          <div class="template-icon">
            <i class="fas fa-apple-alt"></i>
          </div>
          <div class="template-content">
            <div class="template-title">健康饮食</div>
            <div class="template-description">每天摄入5份蔬果</div>
            <div class="template-meta">
              <span class="template-users"><i class="fas fa-user"></i> 28,734人在用</span>
              <span class="template-rating"><i class="fas fa-star"></i> 4.5</span>
            </div>
          </div>
          <div class="template-action">
            <button class="btn btn-primary btn-sm">添加</button>
          </div>
        </div>
        
        <div class="template-card">
          <div class="template-icon">
            <i class="fas fa-bed"></i>
          </div>
          <div class="template-content">
            <div class="template-title">早睡早起</div>
            <div class="template-description">每晚11点前睡觉，每早7点起床</div>
            <div class="template-meta">
              <span class="template-users"><i class="fas fa-user"></i> 26,128人在用</span>
              <span class="template-rating"><i class="fas fa-star"></i> 4.6</span>
            </div>
          </div>
          <div class="template-action">
            <button class="btn btn-primary btn-sm">添加</button>
          </div>
        </div>
        
        <div class="template-card">
          <div class="template-icon">
            <i class="fas fa-brain"></i>
          </div>
          <div class="template-content">
            <div class="template-title">专注学习</div>
            <div class="template-description">每天使用番茄工作法学习1小时</div>
            <div class="template-meta">
              <span class="template-users"><i class="fas fa-user"></i> 22,563人在用</span>
              <span class="template-rating"><i class="fas fa-star"></i> 4.7</span>
            </div>
          </div>
          <div class="template-action">
            <button class="btn btn-primary btn-sm">添加</button>
          </div>
        </div>
        
        <div class="template-card">
          <div class="template-icon">
            <i class="fas fa-language"></i>
          </div>
          <div class="template-content">
            <div class="template-title">学习外语</div>
            <div class="template-description">每天学习15分钟外语</div>
            <div class="template-meta">
              <span class="template-users"><i class="fas fa-user"></i> 18,945人在用</span>
              <span class="template-rating"><i class="fas fa-star"></i> 4.8</span>
            </div>
          </div>
          <div class="template-action">
            <button class="btn btn-primary btn-sm">添加</button>
          </div>
        </div>
        
        <div class="template-card">
          <div class="template-icon">
            <i class="fas fa-tasks"></i>
          </div>
          <div class="template-content">
            <div class="template-title">计划明天</div>
            <div class="template-description">每晚花5分钟规划第二天任务</div>
            <div class="template-meta">
              <span class="template-users"><i class="fas fa-user"></i> 16,782人在用</span>
              <span class="template-rating"><i class="fas fa-star"></i> 4.9</span>
            </div>
          </div>
          <div class="template-action">
            <button class="btn btn-primary btn-sm">添加</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Tab Bar -->
    <div class="tab-bar">
      <div class="tab-item" data-nav="dashboard.html">
        <i class="fas fa-home"></i>
        <span>首页</span>
      </div>
      <div class="tab-item active">
        <i class="fas fa-list-ul"></i>
        <span>模板</span>
      </div>
      <div class="tab-item" data-nav="analytics.html">
        <i class="fas fa-chart-pie"></i>
        <span>统计</span>
      </div>
      <div class="tab-item" data-nav="community.html">
        <i class="fas fa-users"></i>
        <span>社区</span>
      </div>
      <div class="tab-item" data-nav="profile.html">
        <i class="fas fa-user"></i>
        <span>我的</span>
      </div>
    </div>
  </div>

  <style>
    /* Templates specific styles */
    .search-bar {
      display: flex;
      align-items: center;
      background-color: var(--background-color);
      border-radius: 10px;
      padding: 10px 15px;
      margin-bottom: 15px;
    }
    
    .search-bar input {
      border: none;
      background: none;
      flex: 1;
      margin-left: 10px;
      font-family: var(--ios-font);
      font-size: 16px;
      outline: none;
    }
    
    .category-scroller {
      display: flex;
      overflow-x: auto;
      gap: 10px;
      padding: 5px 0;
      margin-bottom: 20px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
    }
    
    .category-scroller::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }
    
    .category-item {
      padding: 8px 15px;
      background-color: var(--background-color);
      border-radius: 20px;
      white-space: nowrap;
      font-size: 14px;
      cursor: pointer;
    }
    
    .category-item.active {
      background-color: var(--primary-color);
      color: white;
    }
    
    .template-section {
      margin-bottom: 25px;
    }
    
    .template-section h3 {
      margin-bottom: 15px;
    }
    
    .template-card {
      display: flex;
      background-color: var(--card-color);
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 15px;
      align-items: center;
    }
    
    .template-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--background-color);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
      color: var(--primary-color);
      font-size: 20px;
    }
    
    .template-icon.special {
      background-color: var(--primary-color);
      color: white;
    }
    
    .template-content {
      flex: 1;
    }
    
    .template-title {
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .template-description {
      color: var(--text-secondary);
      font-size: 14px;
      margin-bottom: 10px;
    }
    
    .template-meta {
      display: flex;
      gap: 15px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .btn-sm {
      padding: 8px 15px;
      font-size: 14px;
    }
    
    .atomic-habits-showcase {
      display: flex;
      align-items: center;
      background-color: var(--card-color);
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 15px;
    }
    
    .atomic-habits-logo {
      width: 60px;
      height: 60px;
      border-radius: 10px;
      overflow: hidden;
      margin-right: 15px;
    }
    
    .atomic-habits-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .atomic-habits-intro {
      flex: 1;
    }
    
    .atomic-habits-intro p {
      margin: 0;
      font-size: 14px;
    }
    
    .four-laws {
      background-color: var(--background-color);
      border-radius: 8px;
      padding: 10px;
      margin-top: 10px;
    }
    
    .law-item {
      font-size: 12px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .law-item i {
      width: 20px;
      color: var(--primary-color);
    }
    
    .law-item:last-child {
      margin-bottom: 0;
    }
    
    .template-card.special {
      position: relative;
      border-left: 4px solid var(--primary-color);
    }
  </style>
  
  <script src="js/app.js"></script>
</body>
</html>
